<template>
  <div class="home">
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      disabled
      @click="$router.push('/home/searchPop')"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img
          :src="item.image_url"
          :style="{ display: 'block' }"
          width="100%"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>
    <van-grid column-num="5">
      <van-grid-item
        v-for="item in iconnav"
        :key="item.id"
        :icon="item.icon_url"
        :text="item.name"
      />
    </van-grid>
    <div class="brandlist">
      <p>品牌制造商直供</p>
      <ul>
        <li v-for="item in brand" :key="item.id">
          <img :src="item.pic_url" width="100%" alt="" />
          <p class="title">{{ item.name }}</p>
          <p class="txt">￥{{ item.floor_price.toFixed(2) }}元</p>
        </li>
      </ul>
    </div>
    <div class="newlist">
      <p class="new_title">周一周四新品首发</p>
      <ul>
        <li v-for="item in newList" :key="item.id">
          <img :src="item.list_pic_url" width="100%" />
          <p>{{ item.name }}</p>
          <p
            :style="{
              color: '#8b0000',
              margin: '.133333rem',
            }"
          >
            ￥{{ item.retail_price.toFixed(2) }}元
          </p>
        </li>
      </ul>
    </div>
    <router-view />
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import { GetHomeData } from "@/request/api";
export default {
  name: "Home",
  data() {
    return {
      value: "",
      banner: [],
      iconnav: [],
      brand: [],
      newList: [],
    };
  },
  created() {
    GetHomeData()
      .then((res) => {
        console.log(res.data);
        console.log(res.data.channel);
        this.banner = res.data.banner;
        this.iconnav = res.data.channel;
        this.brand = res.data.brandList;
        this.newList = res.data.newGoodsList;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  components: {},
};
</script>
<style lang="less">
.van-search__content {
  border-radius: 80px;
}
.brandlist {
  margin: 0.2rem 0 0 0;
  background-color: white;
  width: 100%;

  text-align: center;

  p {
    padding: 0.15rem 0;
    font-size: 0.14rem;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 49%;
      margin: 0.01rem 0;
      position: relative;
      .title {
        position: absolute;
        left: 10%;
        top: 3%;
      }
      .txt {
        position: absolute;
        left: 10%;
        top: 25%;
        color: #8b0000;
      }
    }
  }
}

.newlist {
  width: 100%;
  margin: 0.2rem 0;
  height: 100px;
  background: white;
  text-align: center;
  p {
    font-size: 0.14rem;
  }
  .new_title {
    padding: 0.133333rem 0;
  }
  ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 49%;
      margin: 0.01rem 0;
    }
  }
}
</style>
